<!DOCTYPE html>
<html>
  <head>
    <title>Luigi Mock Engine Testing MFE</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
    />
    <script src="/node_modules/@luigi-project/client/luigi-client.js"></script>
    <link
      rel="stylesheet"
      href="/node_modules/fundamental-styles/dist/layout-panel.css"
    />
    <link rel="stylesheet" href="/node_modules/fundamental-styles/dist/button.css" />
  </head>

  <body>
    <div class="fd-layout-panel">
      <div class="fd-layout-panel__header">
        <div class="fd-layout-panel__head">
          <h3 class="fd-title fd-title--h3">
            UX Manager testing panel
          </h3>
          <div class="fd-layout-panel__actions">
            <button id="uxbutton1" class="fd-button" data-arg1="alert">
              Test MockModule Alert
            </button>
            <button id="uxbutton2" class="fd-button" data-arg1="confirmModal">
              Test MockModule ConfirmModal
            </button>
            <button id="uxbutton3" class="fd-button" data-arg1="loadIndicator">
              Test MockModule Load Indicator
            </button>
            <button id="uxbutton4" class="fd-button" data-arg1="setCurrentLocale">
              Test MockModule set current Locale
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="fd-layout-panel">
      <div class="fd-layout-panel__header">
        <div class="fd-layout-panel__head">
          <h3 class="fd-title fd-title--h3">
            Link Manager testing panel
          </h3>
          <div class="fd-layout-panel__actions">
            <button id="button1" class="fd-button" data-arg1="modal">
              Test MockModule Modal
            </button>
            <button id="button2" class="fd-button" data-arg1="split">
              Test MockModule Split
            </button>
            <button id="button3" class="fd-button" data-arg1="drawer">
              Test MockModule Drawer
            </button>
            <button id="button4" class="fd-button" data-arg1="pathExists">
              Test MockModule Path Exists
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script type="module">
  import { LuigiMockEngine } from './node_modules/@luigi-project/testing-utilities/dist/index.js';

  let initPostMessageMthd = await Promise.resolve(LuigiMockEngine.initPostMessageHook());
  let buttonArray = [
    'button1',
    'button2',
    'button3',
    'button4',
    'uxbutton1',
    'uxbutton2',
    'uxbutton3',
    'uxbutton4'
  ];

  // Attach post message hook from MockModule
  initPostMessageMthd();

  const callMockModule = () => {
    let msgType = event.target.getAttribute('data-arg1');
    let LuigiClient = window.LuigiClient;

    switch (msgType) {
      // Client Linkmanager features
      case 'modal':
        LuigiClient.linkManager().openAsModal('projects/pr1/users', {
          title: 'Users',
          size: 'm'
        });
        break;

      case 'split':
        LuigiClient.linkManager().openAsSplitView('projects/pr1/logs', {
          title: 'Logs',
          size: 40,
          collapsed: true
        });
        break;

      case 'drawer':
        LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {
          header: true,
          backdrop: true,
          size: 's'
        });
        break;

      case 'pathExists':
        LuigiClient.linkManager().pathExists('/');
        break;

      // Client UX Manager features
      case 'alert':
        const settings = {
          text: 'This is just a test alert for external micro frontend.',
          type: 'success'
        };
        LuigiClient.uxManager().showAlert(settings);
        break;

      case 'confirmModal':
        const modalSettings = {
          type: 'confirmation',
          header: 'Confirmation',
          body: 'Are you sure you want to do this?',
          buttonConfirm: 'Yes',
          buttonDismiss: 'No'
        };
        LuigiClient.uxManager()
          .showConfirmationModal(modalSettings)
          .then(() => {})
          .catch(e => {});
        break;

      case 'loadIndicator':
        LuigiClient.uxManager().showLoadingIndicator();
        break;

      case 'setCurrentLocale':
        LuigiClient.uxManager().setCurrentLocale('/');
        break;

      default:
        break;
    }
  };

  // Attach event listeners to Buttons
  buttonArray.forEach(btn => {
    document.getElementById(btn).addEventListener('click', callMockModule);
  });
</script>
